<template>
  <div class="home-container">
    <div class="photo-content">
      <photo-view
        :photos="photoStore.photos"
        :loading="photoStore.loading"
        :has-more="photoStore.pagination.page < photoStore.pagination.totalPages"
        :total="photoStore.pagination.total"
        :current-page="photoStore.pagination.page"
        :page-size="photoStore.pagination.limit"
        @load-more="photoStore.loadMore"
        @page-change="photoStore.setPage"
        @size-change="photoStore.setLimit"
        @sort-change="photoStore.setSort"
        @photo-click="openPhotoViewer"
        @photo-contextmenu="(photo, event) => handlePhotoContextMenu(photo, event)"
        @photo-select="photoStore.togglePhotoSelection"
        @photo-favorite="photoStore.togglePhotoFavorite"
        @photo-rating-change="photoStore.updatePhotoRating"
        @batch-operation="handleBatchOperation"
      />
      
      <!-- 照片查看器 -->
      <photo-viewer
        v-model:visible="photoViewerVisible"
        :photo="currentPhoto"
        :photos="photoStore.photos"
        :current-index="currentPhotoIndex"
        @navigate="handlePhotoNavigate"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import PhotoView from '../components/photo/PhotoView.vue'
import PhotoViewer from '../components/photo/PhotoViewer.vue'
import { usePhotoStore } from '../stores/photo'
import { useAppStore } from '../stores/app'
import type { Photo } from '../types/photo'

// 导入全局类型
import '../types/global'

// 使用状态管理和路由
const photoStore = usePhotoStore()
const appStore = useAppStore()
const router = useRouter()

// 照片查看器状态
const photoViewerVisible = ref(false)
const currentPhoto = ref<Photo>()
const currentPhotoIndex = ref(0)

// 计算属性
const selectedPhotos = computed(() => photoStore.selectedPhotos)

// 打开照片查看器
const openPhotoViewer = (photo: Photo) => {
  currentPhoto.value = photo
  currentPhotoIndex.value = photoStore.photos.findIndex(p => p.id === photo.id)
  photoViewerVisible.value = true
}

// 处理照片导航
const handlePhotoNavigate = (index: number) => {
  currentPhotoIndex.value = index
  currentPhoto.value = photoStore.photos[index]
}

// 处理照片右键菜单
const handlePhotoContextMenu = (photo: Photo, event: MouseEvent) => {
  // TODO: 实现右键菜单逻辑
  console.log('右键菜单:', photo, event)
}

// 处理批量操作
const handleBatchOperation = async (operation: string, photos: Photo[], data?: any) => {
  switch (operation) {
    case 'delete':
      try {
        await photoStore.deletePhotos(photos.map(p => p.id))
        ElMessage.success('批量删除成功')
      } catch (error) {
        ElMessage.error('批量删除失败')
      }
      break
      
    case 'addToAlbum':
      // TODO: 实现添加到相册逻辑
      router.push({
        name: 'Albums',
        query: { addToAlbum: photos.map(p => p.id).join(',') }
      })
      break
      
    case 'addTags':
      // TODO: 实现添加标签逻辑
      router.push({
        name: 'Tags',
        query: { photos: photos.map(p => p.id).join(',') }
      })
      break
      
    case 'setRating':
      try {
        await photoStore.updatePhotos(
          photos.map(p => p.id),
          { rating: data.rating }
        )
        ElMessage.success('批量设置评分成功')
      } catch (error) {
        ElMessage.error('批量设置评分失败')
      }
      break
  }
}

// 组件挂载时加载照片
const loadPhotos = async () => {
  appStore.setCurrentPage('home')
  
  try {
    await photoStore.fetchPhotos()
  } catch (error) {
    console.error('加载照片失败:', error)
    ElMessage.error('加载照片失败')
  }
}

// 初始化
loadPhotos()
</script>

<style scoped>
.home-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
}

.main-content {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.photo-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 16px;
}
</style>